<!--
 * @Description: 流程任务维护
 * @Author: wangwangwang
 * @Date: 2020-07-23 15:21:24
 * @LastEditors  : yangxr
 * @LastEditTime : 2021-12-27 17:13:52
-->
<template>
  <div class="pages_content notice">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <transition name="from"></transition>
            <span v-show="!showCardNav"
              ><i style="margin-right: 5px" class="el-icon-arrow-down"></i
            ></span>
            <transition name="to"></transition>
            <span v-show="showCardNav"
              ><i style="margin-right: 5px" class="el-icon-arrow-up"></i
            ></span>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav" class="search">
            <el-form
              :inline="true"
              :model="tableParam"
              class="demo-form-inline"
            >
              <el-form-item label="单据编号">
                <el-input
                  v-model="tableParam.code"
                  placeholder="请输入"
                  @keyup.enter.native="queryPage()"
                ></el-input>
              </el-form-item>
              <el-form-item label="申请人">
                <el-input
                  v-model="tableParam.name"
                  placeholder="请输入"
                  @keyup.enter.native="queryPage()"
                ></el-input>
              </el-form-item>
              <el-form-item label="提交时间">
                <el-date-picker
                  v-model="tableParam.time"
                  style="height: 36px"
                  type="datetimerange"
                  unlink-panels
                  align="right"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="名称">
                <el-input
                  v-model="tableParam.taskName"
                  placeholder="请输入"
                  @keyup.enter.native="queryPage()"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  size="medium"
                  class="bottom_all"
                  @click="(tableParam.page = 1), queryPage()"
                  >查 询</el-button
                >
                <el-button size="medium" class="bottom_all_two" @click="reset()"
                  >重 置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_info" :style="style">
            <el-table
              :header-cell-style="{ background: '#f3f6f9' }"
              :cell-style="{ borderRight: 'none' }"
              border
              stripe
              style="width: 100%"
              :data="tableData"
              tooltip-effect="dark"
            >
              <el-table-column
                align="center"
                type="selection"
                width="50"
              ></el-table-column>
              <template v-for="(item, index) in table">
                <el-table-column
                  v-if="item.status"
                  :key="index"
                  :fixed="item.label === '操作' ? 'right' : false"
                  :label="item.label"
                  align="center"
                  :width="item.width"
                >
                  <template slot-scope="scope">
                    <el-button
                      v-if="item.label === '操作'"
                      class="bottom_one"
                      size="mini"
                      @click="handleEdit(scope.row)"
                      >强制编辑</el-button
                    >
                    <el-button
                      v-if="item.label === '操作'"
                      class="bottom_one"
                      size="mini"
                      @click="handleInterven(scope.row)"
                      >强制干预</el-button
                    >
                    <el-button
                      v-if="item.label === '操作'"
                      class="bottom_one"
                      size="mini"
                      @click="handleDelete(scope.row)"
                      >强制删除</el-button
                    >
                    <span v-if="item.prop === 'taskStatus'">
                      <el-tag v-if="scope.row.taskStatus === 1" type="success"
                        >待提交</el-tag
                      >
                      <el-tag v-if="scope.row.taskStatus === 2" type="info"
                        >待审批</el-tag
                      >
                      <el-tag v-if="scope.row.taskStatus === 3" type="warning"
                        >已结束</el-tag
                      >
                      <el-tag v-if="scope.row.taskStatus === 4" type="danger"
                        >已撤销</el-tag
                      >
                      <el-tag v-if="scope.row.taskStatus === 5" type="danger"
                        >未通过</el-tag
                      >
                    </span>
                    <span
                      v-if="item.label !== '操作' && item.prop !== 'taskStatus'"
                      >{{ scope.row[item.prop] }}</span
                    >
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination
            :current-page.sync="tableParam.page"
            :page-size="tableParam.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100, 200, 500, 1000]"
            layout="prev,pager,sizes,next,jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="queryPage()"
          ></el-pagination>
        </div>
        <div>
          <el-button
            size="mini"
            class="bottom_all_two"
            icon="el-icon-refresh-right"
            @click="queryPage()"
            >刷新</el-button
          >
        </div>
      </div>
    </el-container>
    <Flowbackup
      :visible="backVisible"
      :tableData="backTableData"
      @closeModel="backVisible = false"
      @hanldeSure="hanldeSure"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import breaDcrumb from "@/components/breadcrumb";
import Flowbackup from "@/components/WorkFlow/flowbackup";
import { queryTaskPage, batchDelete } from "@/api/Signed/flows";
import { getNodeList, backPrefixNode } from "@/api/task/flows";
import { UpdatePingGu } from "@/api/internetSales/projectClarifi.js";
import { updataData } from "@/api/smart/warehouse/ADRN";
import { makeupdStatus, makeupdStatus2 } from "@/api/smart/checkout";
import { updRawInfo, updRawInfo2 } from "@/api/smart/specialmaterial/checkout";
import { approvalStatus } from "@/api/smart/schedul/d.js";
export default {
  components: {
    breaDcrumb,
    Flowbackup,
  },
  data() {
    return {
      /*判断收起展开*/
      showCardNav: true,
      /*列表展示*/
      table: [
        { label: "名称", width: "400", prop: "taskName", status: true },
        { label: "编码", width: "200", prop: "receiptNumber", status: true },
        { label: "任务分类", width: "120", prop: "taskTypeName", status: true },
        {
          label: "提交人",
          width: "auto",
          prop: "createUserName",
          status: true,
        },
        {
          label: "提交人机构",
          width: "150",
          prop: "userOrganizationName",
          status: true,
        },
        {
          label: "提交人部门",
          width: "150",
          prop: "userDepartmentName",
          status: true,
        },
        { label: "状态", width: "auto", prop: "taskStatus", status: true },
        {
          label: "提交时间",
          width: "auto",
          prop: "submissionTime",
          status: true,
        },
        { label: "计时", width: "auto", prop: "timekeeping", status: true },
        {
          label: "执行人",
          width: "auto",
          prop: "updateUserName",
          status: true,
        },
        { label: "执行时间", width: "200", prop: "updateTime", status: true },
        { label: "操作", width: "330", prop: "", status: true },
      ],
      /*列表选中的数据集*/
      tableParam: {
        page: 1,
        pageSize: 10,
        code: "",
        name: "",
        startTime: "",
        endTime: "",
        taskName: "",
        time: [],
      },
      total: 0,
      ids: [],
      sortIds: [],
      tableData: [],
      nodeTableData: [],
      backVisible: false,
      backTableData: [],
    };
  },
  mounted() {
    this.queryPage();
  },
  methods: {
    queryPage() {
      if (this.tableParam.time.length) {
        this.tableParam.startTime = this.tableParam.time[0];
        this.tableParam.endTime = this.tableParam.time[1];
      }
      queryTaskPage(this.tableParam).then((res) => {
        if (res.code === 1001) {
          this.tableData = res.data.data;
          this.total = res.data.totalRows;
        }
      });
    },
    /*重置*/
    reset() {
      this.tableParam = {
        page: 1,
        pageSize: 10,
        code: "",
        name: "",
        startTime: "",
        endTime: "",
        time: [],
      };
      this.queryPage();
    },
    handleEdit(data) {
      if (data.formType === 1) {
        // 自定义表单
        const query = {
          processManagerId: data.processManagerId,
          processTaskId: data.id,
          processVersionId: data.versionNumber,
          receiptNumber: data.receiptNumber,
          taskName: data.taskName,
          taskStatus: data.taskStatus,
          createTime: data.createTime,
          createUserName: data.createUserName,
          type: 2,
        };
        this.$router.push({ name: "taskDetails", query });
        return;
      }
      const query = {
        processManagerId: data.processManagerId,
        processTaskId: data.id,
        processVersionId: data.versionNumber,
        receiptNumber: data.receiptNumber,
        dataContent: data.dataContent,
        createTime: data.createTime,
        createUserName: data.createUserName,
        taskName: data.taskName,
        taskStatus: data.taskStatus,
        type: 10,
      };
      this.$router.push({ name: data.dataSource, query });
    },
    handleInterven(data) {
      if (data.taskStatus === 1) {
        this.$message.warning("流程还未提交！！！");
        return;
      }
      const params = {
        processManagerId: data.processManagerId,
        processTaskId: data.id,
        processVersionId: data.versionNumber,
        receiptNumber: data.receiptNumber,
      };
      getNodeList(params).then((res) => {
        if (res.code === 1001) {
          res.data.pop();
          const newData = [];
          res.data.forEach((item) => {
            item.instanceLogsList.forEach((items) => {
              const data = {
                nodeName: item.nodeName,
                userName: items.userName,
                multiApprovalType: item.multiApprovalType,
                approvalOptions: items.approvalOptions,
                handlerTime: items.handlerTime,
                approvalStatus: items.approvalStatus || item.approvalStatus,
                processInstanceId: item.processInstanceId,
                id: item.id,
              };
              newData.push(data);
            });
          });
          this.nodeTableData = newData;
          this.backTableData = newData;
          this.backVisible = true;
          this.sourceNodeId = data.instanceNodeId;
        }
      });
    },
    hanldeSure(data) {
      console.log(data);
      // const newData = this.backTableData.find((item) => item.approvalStatus === 1);
      // if (!newData) {
      //   this.$message.warning('未找到当前审批节点');
      //   return
      // }
      if (data.id == this.sourceNodeId) {
        return this.$message.warning("退回的节点不能与当前节点相同");
      }
      const params = {
        sourceNodeId: this.sourceNodeId,
        targetNodeId: data.id,
      };
      backPrefixNode(params).then((res) => {
        if (res.code === 1001) {
          this.$message.success("回退成功");
          this.backVisible = false;
        }
      });
    },
    handleDelete(data) {
      this.$confirm("确定删除此数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "bottom_all_two",
        confirmButtonClass: "bottom_all",
        type: "warning",
      })
        .then(() => {
          batchDelete([data.id]).then((res) => {
            if (res.code === 1001) {
              this.$message.success("删除成功");
              this.synchronizationEvent(data);
              this.queryPage();
            }
          });
        })
        .catch(() => {});
    },
    /**
     * @Description: 针对业务进行处理修改流程状态
     * @param {*} data
     * @Author: wangwangwang
     */
    synchronizationEvent(data) {
      const { dataContent, dataSource } = data;
      if (dataSource === "EngineeringEvaluation") {
        // 评估
        UpdatePingGu({
          engineeringId: JSON.parse(dataContent).engineeringManagementId,
          statusNum: 1,
          statusType: 2,
        });
      } else if (dataSource === "ProjectClarifiFlow") {
        // 交底
        UpdatePingGu({
          engineeringId: JSON.parse(dataContent).formData.engineeringId,
          statusNum:
            JSON.parse(dataContent).executePhase === 1
              ? JSON.parse(dataContent).formData.entrustStatus
              : JSON.parse(dataContent).formData.contractStatus,
          statusType: JSON.parse(dataContent).executePhase,
          secondaryStatus: 1,
        });
      } else if (dataSource === "sign_ADRN") {
        // 外加剂返料
        updataData({
          id: JSON.parse(JSON.parse(dataContent).id).id,
          dataStatus: 2,
        });
      } else if (dataSource === "checkflows") {
        // 原物料检测
        makeupdStatus({
          id: JSON.parse(dataContent).id,
          dataStatus: 2,
        });
      } else if (dataSource === "checkflows2") {
        // 混凝土检测
        makeupdStatus2({
          id: JSON.parse(dataContent).id,
          dataStatus: 2,
        });
      } else if (dataSource === "SpringbackCheck") {
        // 回弹检验
        makeupdStatus2({
          id: JSON.parse(dataContent).id,
          detectionStatus: 2,
        });
      } else if (dataSource === "SpecialCheckFlows") {
        // 特材检验
        const params = {
          id: JSON.parse(dataContent).id,
          state: 1,
        };
        if (
          JSON.parse(dataContent).typeId * 1 === 1 ||
          JSON.parse(dataContent).typeId * 1 === 2
        ) {
          updRawInfo(params);
        } else {
          updRawInfo2(params);
        }
      } else if (dataSource === "sign_smartscheduld") {
        //  生产排程外协审批
        approvalStatus({
          id: JSON.parse(JSON.parse(dataContent).id.obj).engineeringPlan.id,
          approvalStatus: 1,
        });
      }
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.queryPage();
    },
  },
  computed: {
    ...mapGetters({
      screenWidth: "getscreenWidth",
      screenHeight: "getscreenHeight",
      Collapse: "getsCollapse",
    }),
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 124;
      } else {
        num = this.screenWidth - 220;
      }
      return "width:" + num + "px;";
    },
  },
};
</script>
<style lang="scss" scoped>
.notice {
  .el-link {
    i {
      font-size: 14px;
      color: $bg_color;
    }
  }
  .el-link:hover {
    color: $bg_color;
  }
  font-size: $font_size;
  .el-main {
    padding: 0;
  }
  .el-main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .el-main::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .el-main::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .el-main::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .el-main::-webkit-scrollbar-corner {
    background: #179a16;
  }
  .search {
    padding: 20px 20px 0;
  }
  .header_right {
    @include discen_al;
    padding: 0 20px;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
  .card_nav {
    padding: 0 20px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card_info {
    padding: 0 20px;
  }
  .card_bottom {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    .card_bottom_left {
      display: flex;
      align-items: center;
      font-size: $font_size;
    }
  }
}
</style>
